
<div id="main-wrapper">
	<h1>
		<i class="glyphicon glyphicon-question-sign"></i>提问管理
	</h1>
	<form id="form-qna-toggle">
		<div class="btn-group btn-group-lg">
			<button type="submit" class="btn btn-default" name="state" value="open">开启</button>
			<button type="submit" class="btn btn-default" name="state" value="close">关闭</button>
		</div>
	</form>

	<table id="table-msglist" class="table table-striped">
		<thead>
		<tr>
			<th>听众昵称</th>
			<th>提问内容</th>
		</tr>
		</thead>

		<tbody>
            <script type="text/html" id= "tr-tmpl">
                <tr>
                    <td><%- audienceName %></td>
                    <td><%- text %></td>
                </tr>
            </script>
		</tbody>
        <tfoot>
            <tr>
                <td colspan="2">
                    <script type="text/html" id="pagin-tmpl">
                        <ul class="pagination">
                            <li>
                                <a onclick="getMessageList(1)">&laquo;</a>
                            </li>
                            <% if (current > 2) { %>
                            <li class="disabled">
                                <a>..</a>
                            </li>
                            <% } %>
                            <% if (prev) { %>
                            <li>
                                <a onclick="getMessageList(<%- prev %>)"><%- prev %></a>
                            </li>
                            <% } %>
                            <li class="active">
                                <a onclick="getMessageList(<%- current %>)"><%- current %></a>
                            </li>
                            <% if (next) { %>
                            <li>
                                <a onclick="getMessageList(<%- next %>)"><%- next %></a>
                            </li>
                            <% } %>
                            <% if (current < (count - 1)) { %>
                            <li class="disabled">
                                <a>..</a>
                            </li>
                            <% } %>
                            <li>
                                <a onclick="getMessageList(<%- count %>)">&raquo;</a>
                            </li>
                        </ul>
                    </script>
                </td>
            </tr>
        </tfoot>
	</table>
 </div>


<script>
	var $table = $('#table-msglist'),
		$tbody = $table.find('tbody'),
		$formToggle=$('#form-qna-toggle'),
        trTmpl = _.template($tbody.find('#tr-tmpl').html()),
        $paginTmpl = $table.find('#pagin-tmpl'),
        paginTmpl = _.template($paginTmpl.html());

	$.get("/do/s/getqna", function(resObj){
		var state = resObj['state'];
		$formToggle.find('[value="'+ state +'"]').addClass('active');
	});

	$formToggle.find('[name="state"]').on('click', function(){
		$(this).addClass('active').siblings().removeClass('active');
	});
	$formToggle.on('submit', function(ev){
		ev.preventDefault();
		$.get('/do/s/setqna', {
			state: $formToggle.find('[name="state"].active').val()
		}, function(resObj) {
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
		});
	});

	getMessageList(1);

	function getMessageList(page) {
		$.get('/do/s/msglist',{
            page: page
        }, function(resObj){
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			if (! ok) return;
			var total = resObj['total'],
                msgList = resObj['msgList'];
			if (! msgList.length) {
				return $tbody.html([
					'<tr class="text-center">',
						'<td colspan="2">没有记录</td>',
					'</tr>'
				].join(''));
			}
			$tbody.html(_.reduce(msgList, function(memo, msg){
				return memo + trTmpl({
                    audienceName:msg.audienceName,
                    text: msg.text
                });
			}, ''));
            // pagination
            var count = Math.ceil(total / pageSize);
            $paginTmpl.next().remove();
            $paginTmpl.after(paginTmpl({
                current: page,
                prev: page > 1 ? page - 1 : null,
                next: page < count ? page + 1 : null,
                count: count
            }));
		});
	}
</script>